<script setup lang="jsx">
import {computed, inject, onMounted, ref} from "vue";
import DataGrid from "@cps/DataGrid/DataGrid.vue";
import {Message} from "@arco-design/web-vue";
import parcel from "@/api/document/parcel.js";

const record = inject('record')
const visible = defineModel()
const pickupByCustomer = ref(false)
const allowPart = ref(false)
const customerData = ref([])
const userData = ref([])
const columns = ref([
  {title: '运单号/箱号', data: 'number', readOnly: true,},
  {title: '扩展箱号', data: 'client', readOnly: true},
  {title: '重量', data: 'actual_weight',type:'numeric'},
  {title: '长', data: 'actual_length',type:'numeric'},
  {title: '宽', data: 'actual_width',type:'numeric'},
  {title: '高', data: 'actual_height',type:'numeric'},
  // {title: '材积', dataIndex: 'client',},
  // {title: '收费重', dataIndex: 'client',},
  // {title: '围长', dataIndex: 'client',},
])
const form = ref({
  pickup_type:'normal',
  actual_weight:null,
  actual_volume:null,
  charge_weight:null,
  shipment_id:null,
})
const title = computed(() => {
  return '拣货';
})
const tableData = computed(() => pickupByCustomer.value ? customerData.value : userData.value)

onMounted(()=>{
  if (!record.value) {
    return;
  }
  form.value.pickup_type = record.value.volume_weight.pick_type ? record.value.volume_weight.pick_type : 'normal'
  form.value.actual_weight = parseFloat(record.value.volume_weight.actual_weight)
  form.value.actual_volume = parseFloat(record.value.volume_weight.actual_volume)
  form.value.charge_weight = parseFloat(record.value.volume_weight.charge_weight)
  form.value.shipment_id = record.value.id
  console.log(form.value)
  customerData.value.length = 0
  for (let i = 0; i < record.value.parcel.length; i++) {
    let customerItem = JSON.parse(JSON.stringify(record.value.parcel[i]))
    customerItem.actual_weight = customerItem.client_weight
    customerItem.actual_length = customerItem.client_length
    customerItem.actual_width = customerItem.client_width
    customerItem.actual_height = customerItem.client_height
    customerData.value.push(customerItem)
  }
  userData.value.length = 0
  record.value.parcel.map((item) => {
    userData.value.push(JSON.parse(JSON.stringify(item)))
  })
})
const addToTable = () => {
  if (!form.value.weight || form.value.weight <= 0) {
    Message.error('请填写重量')
    return
  }
  if (!form.value.length || form.value.length <= 0) {
    Message.error('请填写长')
    return
  }
  if (!form.value.width || form.value.width <= 0) {
    Message.error('请填写宽')
    return
  }
  if (!form.value.height || form.value.height <= 0) {
    Message.error('请填写高')
    return
  }
  let max = form.value.count || tableData.value.length
  tableData.value.map((item) => {
    if (item.filled === true) {
      return
    }
    if (max <= 0) {
      return;
    }
    if (item.id && item.actual_weight==0) {
      item.actual_weight = form.value.weight;
      item.actual_length = form.value.length;
      item.actual_width = form.value.width;
      item.actual_height = form.value.height;
      item.filled = true;
    }
    max--
  })
}
const getRecord = inject('getRecord')
const submit = async () => {
  let data = tableData.value.filter((item, index) => {
    if (item.actual_weight <= 0 || item.actual_length <= 0 || item.actual_width <= 0 || item.actual_height <= 0) {
      return false;
    }
    if (allowPart.value === false) {
      return true;
    }
    return item.actual_weight != record.value.parcel[index].actual_weight ||
        item.actual_length != record.value.parcel[index].actual_length ||
        item.actual_width != record.value.parcel[index].actual_width ||
        item.actual_height != record.value.parcel[index].actual_height
  }).map(i => {
    return {
      "id": i.id,
      "actual_weight": i.actual_weight,
      "actual_length": i.actual_length,
      "actual_width": i.actual_width,
      "actual_height": i.actual_height
    }
  })
  data.form = form.value
  if(data.length == 0 && form.value.pickup_type == 'normal'){
    Message.error('请检查填入的数据，至少有一箱  重量-长-宽-高 都大于0')
    return;
  }
  
  let res = await parcel.pickup({parcel:data,form:form.value})
  if (!res.success) {
    Message.error(res.message)
    return false;
  }
  Message.info(res.message)
  await getRecord(true)
  visible.value = false
  return true;
}
const clearData = () => {
  pickupByCustomer.value = false;
  userData.value.map((item) => {
    if (item.id) {
      item.actual_weight = 0;
      item.actual_length = 0;
      item.actual_width = 0;
      item.actual_height = 0;
      delete item.filled
    }
  })
}
const cancel = () => {
  visible.value = false
  form.value = {}
}
const pickup_type = ref('normal')
</script>

<template>
  <a-drawer
      :visible="visible"
      :title="title"
      width="70%"
      :destroyOnClose="true"
      :getContainer="false"
      :style="{position: 'absolute'}"
      @cancel="cancel"
      @ok="submit"
  >
    <a-row>
      <a-col>
        <a-form-item label="拣货方式" :rules="[{required:true}]">
          <a-radio-group type="button" v-model="form.pickup_type">
            <a-radio value="normal">普通拣货</a-radio>
            <a-radio value="total">总重拣货</a-radio>
          </a-radio-group>
          <a-checkbox v-show="form.pickup_type == 'normal'" v-model="pickupByCustomer">按客户数据拣货</a-checkbox>
          <a-checkbox v-show="form.pickup_type == 'normal'" v-model="allowPart">允许部分拣货</a-checkbox>
        </a-form-item>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-col>
        <a-space v-show="form.pickup_type == 'total'">
          <a-input-number v-model="form.actual_weight" placeholder="总重量"/>
          <a-input-number v-model="form.actual_volume" placeholder="总体积"/>
          <a-input-number v-model="form.charge_weight" placeholder="总收费重"/>
        </a-space>
        <a-space v-show="form.pickup_type == 'normal'">
          <a-input-number v-model="form.weight" placeholder="重量"/>
          <a-input-number v-model="form.length" placeholder="长"/>
          <a-input-number v-model="form.width" placeholder="宽"/>
          <a-input-number v-model="form.height" placeholder="高"/>
          <a-input-number v-model="form.count" placeholder="件数" :min="0" :max="tableData.length"/>
          <a-button status="success" @click="addToTable">
            <icon-plus/>
            填充
          </a-button>
          <a-button status="danger" @click="clearData">
            <icon-delete/>
            清空表格数据
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <data-grid :columns="columns" :minSpareRows="0" v-model="tableData"/>
  </a-drawer>
</template>

<style scoped>

</style>